<template>
  <div>
    <MainContent
      title="客群明细"
      :back="true"
    >
      <SearchBar inline>
        <template #normal>
          <el-form-item label="唯一标识">
            <el-input
              v-model="tableForm.unionId"
              clearable
              placeholder="请输入唯一标识"
            />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="tableForm.userSymbol"
              clearable
              placeholder="请输入手机号"
            />
          </el-form-item>
          <el-form-item
            v-show="$route.query.type == 0"
            style="margin-bottom: 20px"
          >
            <!-- <el-button @click="resetForm">重置</el-button>-->
            <el-button
              type="primary"
              @click="onSearch"
            >
              查询
            </el-button>
            <el-button
              type="primary"
              @click="isExport = true"
            >
              导入客户
            </el-button>
            <el-button
              type="primary"
              @click="batchDel"
            >
              批量移出
            </el-button>
            <el-button
              type="primary"
              @click="allDel"
            >
              全部移出
            </el-button>
          </el-form-item>
        </template>
      </SearchBar>
      <LayoutTable
        ref="customerClient"
        url="/user/userGroupUser/pageList"
        :row-key="(row) => {
          return String(row.id);
        }
        "
        :param="tableForm"
        @selection-change="selectionChange"
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="55"
        />
        <el-table-column
          prop="userId"
          label="用户ID"
          width="180"
        />
        <el-table-column
          prop="phone"
          label="手机号"
          width="150"
        />
        <el-table-column
          prop="unionId"
          label="唯一标识"
          min-width="150"
        />
        <el-table-column
          prop="merchantAdminUserName"
          label="导入人"
          min-width="100"
        />
        <el-table-column
          prop="createTime"
          label="导入时间"
          width="180"
        >
          <template #default="scope">
            <div>
              {{ $filters.dateFormat(scope.row.createTime) }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="100"
          fixed="right"
        >
          <template #default="scope">
            <div>
              <!-- <el-button @click="del(scope.row)" link type="primary">移出客群</el-button> -->
              <el-button
                link
                type="primary"
                @click="$router.push(`/merchant/customerCenter/customerClient/customerContent/${scope.row.userId}`)"
              >
                详情
              </el-button>
            </div>
          </template>
        </el-table-column>
      </LayoutTable>
    </MainContent>
    <export-customer
      :is-export="isExport"
      @confirmExoprt="confirmExoprt"
      @cancelExport="cancelExport"
    />
  </div>
</template>
<script>
import CustomerApi from "@/api/customerApi";
import ExportCustomer from "./component/exportCustomer.vue";
export default {
  components: { ExportCustomer },
  data() {
    return {
      isExport: false,
      formData: {},
      selectionList: [],
      tableForm: {
        userSymbol: "",
        unionId: "",
        userGroupId: this.$route.params.id,
      },
    };
  },
  created() {
    this.tableForm.userGroupId = this.$route.params.id;
  },
  methods: {

    // delUserBatch 移出客群
    async delUserBatch() {
      let params = {
        ids: this.selectionList.map(item => item.id)
      }
      let rs = await CustomerApi.delUserBatch(params);
      if (rs.code == 200) {
        ElMessage.success("移出客群成功");
        this.onSearch();
      }
    },

    // 删除客群
    async delUser(row) {
      let rs = await CustomerApi.delGroupUser({ id: row.id, name: row.nickName });
      if (rs.code == 200) {
        ElMessage.success("移出客群成功");
        this.onSearch();
      }
    },
    batchDel() {
      if (this.selectionList.length) {
        ElMessageBox.confirm(`此操作将移出选中客户`, "删除提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          this.delUserBatch();
        });
      }
    },
    allDel() {

      ElMessageBox.confirm(`此操作将移出全部客户`, "删除提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let rs = await CustomerApi.delEmptyAll({ id: this.$route.params.id });
        if (rs.code == 200) {
          ElMessage.success("已全部移出客群");
          this.onSearch();
        }

      });
    },
    del(row) {
      this.$confirm("此操作将移出客户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delUser(row);
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消移出",
          });
        });
    },

    confirmExoprt() {
      this.cancelExport();
    },
    cancelExport() {
      this.onSearch();
      this.isExport = false;
    },
    selectionChange(val) {
      this.selectionList = val
    },
    onSearch() {
      this.$nextTick(() => {
        this.$refs.customerClient.search();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list-cover {
  width: 50px;
  height: 50px;
  padding-top: 5px;
}
</style>
